<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div>
            <p>img1</p>
            <img class="image1" src="./image/(10).png">
        </div>
        <div>
            <p>img2</p>
            <img class="image2" src="./image/(52).webp">
        </div>
    </div>
    <div class="box">
        <div>
            <p>img3</p>
            <img class="image3" src="./image//(20).jpeg">
        </div>
        <div>
            <p>img4</p>
            <img class="image4"  src="./image/(15).webp">
        </div>
    </div>
   
        
        
</body>
<style>
    /* 从左到右移动 */
    .image1{
        /* 根据具体的动画名称添加不同的样式 */
        animation-name: aaa;
        /* 设置动画的时长 */
        animation-duration: 4s; 
        /* 动画结束后保留最后一帧的状态 */
        animation-fill-mode: forwards;  
        /* 循环播放 */
        /* animation-iteration-count: infinite;   */
    }
    /* 从小到大缩放 */
    .image2{
        animation-name: aac;
        animation-duration: 4s;
        animation-fill-mode: forwards;
    }
    /* 从下到上移动 */
    .image4{
        position: fixed;
        right: 100px;
        /* 根据具体的动画名称添加不同的样式 */
        animation-name: aab;
        /* 设置动画的时长 */
        animation-duration: 4s; 
        /* 动画结束后保留最后一帧的状态 */
        animation-fill-mode: forwards; 
        /* 循环播放 */
        /* animation-iteration-count: infinite;    */
    }
    /* 一边旋转一边放大 */
    .image3{
        animation-name: aad;
        animation-duration: 4s;
        animation-fill-mode: forwards;
    }


    /* 从左到右位移 aaa：动画名称 0%一开始就执行 100% 执行完动画之后的样式 */ 
    @keyframes aaa {
        0% {
            width: 200px;
            height: 200px;
        }
        100% {
            /* 左右水平移动 */
            transform: translate(400px);
        }
    }
    /* 从下向上移动 */
    @keyframes aab {
        0% {
            top: 700px;
        }
        100% {
            top: 330px;
        }
    }
    /* 从小到大 */
    @keyframes aac {
        0%{
            transform: scale(.1);
        }
        100%{
            /* 缩放默认1倍大于1就是放大，小于1就是缩小 */
            transform: scale(1.2);
        }
    }
    /* 一边旋转一边放大 */
    @keyframes aad {
        0%{
            width: 30px;
            height: 30px;
        }
        100%{
            width: 200px;
            height: 200px;
            transform: rotate(360deg);
        }
    }





    .box{
        display: flex;
        justify-content: space-around;
        text-align: center;
    }

    .box div{
        height: 300px;
    }
    img{
        width: 200px;
        height: 200px;
    }
    .image1 {
        position: fixed;
        top: 30px;
        left: -200px;
    }
    *{
        padding: 0;
        margin: 0;
    }
</style>

</html>